<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { Form, Field, showNotify, Loading } from 'vant';

const BaseForm = ref({
    name: '', tel: '', company: '',describe:''
})
onMounted(() => {

})
// 校验函数可以直接返回一段错误提示
const validatorMessage = (val) => {
    console.log(val)
    let reg = /^((?!\\|\/|:|\*|\?|<|>|\||'|%|@|#|&|\$|\^|&|\*).){1,8}$/;
    if (reg.test(val)) {
        return true;
    }
    return `姓名：${val} 不合法，请重新输入`
};
// 校验函数可以直接返回一段错误提示
const validatorMessage2 = (val) => {
    console.log(val)
    let reg = /^(13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9})$|(^(0\d{10})|^(0\d{2}-\d{8}))$/;
    if (reg.test(val)) {
        return true;
    }
    return `联系方式：${val} 不合法，请重新输入`
};
const onSubmit = (values) => {
    console.log('submit', values);
    let url = 'https://eid.youerp.cn/api/ajax.ashx?oper=Web_UpdateReserveClient';
    const params = {
        name: values.name, phone: values.phone, company: values.company
    }
    axios.get(url, { params }).then(function (res) {
        console.log(res);
        try {
            if (res.status == '200') {
                showNotify({
                    type: 'success',
                    message: '预约成功，稍后我们的工作人员会尽快联系您',
                    position: 'center', color: '#fff',
                    className: "v-tips",
                    background: '#0000008a', duration:3500
                });
                setTimeout(() => {
                    BaseForm.value = {
                        name: '', tel: '', company: ''
                    }
                })
            } else {
                console.log(res);
                showNotify({
                    type: 'warning',
                    message: '系统错误',
                    position: 'center',
                });
            }
        } catch (error) {
            console.log(error)
            showNotify({
                type: 'warning',
                message: '系统错误',
                position: 'center',
            });
        }
    }).catch(function (error) {
        console.log(error);
        showNotify({
            message: '系统错误',
            position: 'center',
        });
    });

}

</script>

<template>
    <div class="main dflex-flow-c ">
        <div class="dflex-s dflex-flow-c wpre-75">
            <h3 class="padding-bottom" style="color: #03577e;">预约演示</h3>
            <p>请填写您的信息，我们的工作人员会尽快联系您</p>
        </div>
        <div style="height: 6.5vh;"></div>
        <van-form @submit="onSubmit" class=" wpre-85">
            <van-cell-group inset>
                <van-field v-model="BaseForm.name" name="name" label="姓名" placeholder="请填写您的姓名" required
                    :rules="[{ validator: validatorMessage, required: true, message: '请填写您的姓名' }]" label-align="top" />
                <van-field v-model="BaseForm.phone" name="phone" label="联系方式" placeholder="请填写您的联系方式" required
                    label-align="top"
                    :rules="[{ validator: validatorMessage2, required: true, message: '请填写您的联系方式' }]" />
                <van-field v-model="BaseForm.company" name="company" label="公司名称" placeholder="请填写您的公司名称"
                    label-align="top" />
                <van-field v-model="BaseForm.describe" rows="2" autosize label="主要需求描述" type="textarea" maxlength="255"
                    placeholder="请输入主要需求描述" show-word-limit label-align="top" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit"
                    color="linear-gradient(to right, #4cbec2, #12b9be)">
                    提交
                </van-button>
            </div>
        </van-form>
        <div class="copyright">
            <b>聚友大道科技发展有限公司</b>
        </div>
    </div>
</template>
<style scoped lang="less">
.main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    color: #0000008a;
}

.v-tips {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 10px 10px 10px #ccc;
}

.van-cell__title {
    font-size: 16px;
    font-weight: 600;
}

label {
    font-size: 16px;
    font-weight: 600;
}

.copyright {
    position: fixed;
    bottom: 15px;
    right: 15px;
    font-size: 12px;
    color: #989b9e;
    font-weight: 400;

    b {
        font-weight: 400;
    }
}
</style>